<!DOCTYPE html>
<html>
<head>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<title>canvas���</title>
    <style>
        #content{
            width: 98%;
            font-size: 5rem;
            margin-top: 50px;
        }
        .left{
            background-color: lightgrey;
            display: inline-block;
            width: 25%;
        }
        .right{
            background-color: lightgrey;
            display: inline-block;
            width: 25%;
        }
        #canvas {
            display: inline;
            width: 44%;
            height: 100%;
        }
        .one{
            text-align: right;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="left">
        <div class="one" data-x=1 data-y=1>three</div>
        <div class="one" data-x=1 data-y=2>two</div>
        <div class="one" data-x=1 data-y=3>one</div>
    </div>
    <canvas id="canvas" style="margin: 0 auto;"></canvas>
    <div class="right">
        <div class="two" data-x=2 data-y=1>two</div>
        <div class="two" data-x=2 data-y=2>one</div>
        <div class="two" data-x=2 data-y=3>three</div>
    </div>
</div>
</body>
<script type="text/javascript">

    window.onload=function(){

    var canvas=document.getElementById("canvas");
    var height = $("#canvas").parent().height();
    var cheight = height*0.724;
    var cwidth = canvas.offsetWidth
    canvas.height= cheight;//canvas高度
    console.log(cheight);
    console.log(cwidth);

    if(canvas.getContext("2d")){
        var context=canvas.getContext("2d");
    } else{
        alert("当前浏览器不支持");
        return false;
    }

    //连线数量
    var num = 3;

    //画点 左上方第一个点
    var start_x = cwidth/15;
    var start_y = 6*cheight/num/7;

    // 横竖间距
    var x_cell = 10*start_x;
    var y_cell = cheight/num;

    var end_x = 10*start_x;
    console.log(x_cell);
    //6个点

    for (let i=0;i<num;i++){
        context.beginPath();
        context.arc(start_x,start_y+i*y_cell,5,0,2*Math.PI);
        context.fillStyle="#000000";
        context.fill();
        context.stroke();
        context.beginPath();
        context.arc(end_x,start_y+i*y_cell,5,0,2*Math.PI);
        context.fillStyle="#000000";
        context.fill();
        context.stroke();
    }
    var left_x = 0;
    var left_y = 0;
    var right_x = 0;
    var right_y = 0;
    var left = 0;
    var right = 0

    $(".one").click(function () {
        $(".one").css("color",'black');
        $(this).css("color",'blue');
        left = 1;
        left_x = start_x;
        left_y = start_y+($(this).data('y')-1)*y_cell;
        if(right == 1){
           drawLine();
        }
    });
    $(".two").click(function () {
        $(".two").css("color",'black');
        $(this).css("color",'blue');
        right = 1;
        right_x = end_x;
        right_y = start_y+($(this).data('y')-1)*y_cell;
        if(left == 1){
            drawLine();
        }
    });

    function drawLine(){
        context.lineWidth=3;
        context.beginPath();
        context.moveTo(left_x,left_y);
        context.lineTo(right_x,right_y);
        context.closePath();
        context.strokeStyle="red";
        context.stroke();
        left = 0;
        right = 0;
        $(".one").css('color',"black")
        $(".two").css('color',"black")
    }

    }

</script>
</html>